<template>
  <div class="user-center-bg">
    <div class="custom-menu-bar">
      <div v-for="item in menuList" :key="item.index" :class="['custom-menu-item', {active: active === item.index}]" @click="go(item.path)">
        {{ item.label }}
      </div>
    </div>
    <div class="user-center-main">
      <div class="user-center-tabs">
        <div :class="['tab-item', {selected: tab==='center'}]" @click="tab='center'">个人中心</div>
        <div :class="['tab-item', {selected: tab==='post'}]" @click="tab='post'">我的发布</div>
      </div>
      <div class="user-center-form-wrap" v-if="tab==='center'">
        <div class="form-fields">
          <el-form :model="form" label-width="80px" class="user-center-form">
            <el-form-item label="学号">
              <el-input v-model="form.username" class="input-yellow" />
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="form.password" type="password" class="input-yellow" />
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="form.real_name" />
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="form.gender" placeholder="请选择">
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
              </el-select>
            </el-form-item>
            <el-form-item label="手机">
              <el-input v-model="form.phone" />
            </el-form-item>
            <el-form-item label="身份证">
              <el-input v-model="form.id_card" />
            </el-form-item>
            <el-form-item label="学院">
              <el-input v-model="form.college" />
            </el-form-item>
            <el-form-item label="年级">
              <el-input v-model="form.grade" />
            </el-form-item>
            <el-form-item label="班级">
              <el-input v-model="form.clazz" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="user-center-btn" @click="onUpdate">保存</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="user-center-form-wrap" v-else>
        <el-table :data="myPosts" style="width:100%;margin-bottom:16px;">
          <el-table-column prop="type" label="类型" width="100" />
          <el-table-column prop="title" label="标题" />
          <el-table-column prop="date" label="发布时间" width="160" />
          <el-table-column label="操作" width="120">
            <template #default="scope">
              <el-button size="small" @click="onView(scope.row)">查看</el-button>
              <el-button size="small" type="danger" @click="onDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="myPosts.length"
          :page-size="5"
          style="margin-top:12px;text-align:right;" />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const menuList = [
  { path: '/', label: '首页', index: '1' },
  { path: '/projects', label: '项目展示', index: '2' },
  { path: '/vote-result', label: '投票结果', index: '3' },
  { path: '/post-platform', label: '互动平台', index: '4' },
  { path: '/notices', label: '公告通知', index: '5' },
  { path: '/user-center', label: '个人中心', index: '6' },
  { path: '/admin', label: '后台管理', index: '7' },
];
const active = ref('6');
function go(path) {
  router.push(path);
  const found = menuList.find(item => item.path === path);
  if (found) active.value = found.index;
}
const tab = ref('center');
const form = ref({ username: '', password: '', real_name: '', gender: '', phone: '', id_card: '', college: '', grade: '', clazz: '' });
function onUpdate() { /* 更新逻辑 */ }
const myPosts = ref([
  { type: '项目', title: '创新项目A', date: '2024-06-01' },
  { type: '帖子', title: '交流贴1', date: '2024-06-02' },
  { type: '评论', title: '对项目A的评论', date: '2024-06-03' },
]);
function onView(row) { /* 查看详情 */ }
function onDelete(row) { /* 删除操作 */ }
</script>
<style scoped>
.user-center-bg {
  min-height: 100vh;
  background: #fff;
}
.custom-menu-bar {
  width: 100vw;
  background: #000;
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  height: 36px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.custom-menu-item {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  padding: 0 18px;
  height: 36px;
  line-height: 36px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  background: transparent;
  border: none;
  outline: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  user-select: none;
}
.custom-menu-item.active {
  background: #fff;
  color: #111;
  font-weight: bold;
  border-bottom: 2px solid #fff;
}
.user-center-main {
  margin: 0 auto;
  margin-top: 32px;
  max-width: 900px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #e0e0e0;
  display: flex;
  min-height: 500px;
}
.user-center-tabs {
  width: 160px;
  background: #444;
  border-radius: 12px 0 0 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-top: 32px;
}
.tab-item {
  color: #fff;
  font-size: 18px;
  padding: 18px 0;
  text-align: center;
  cursor: pointer;
  background: transparent;
  border: none;
  outline: none;
  margin-bottom: 8px;
  border-radius: 8px 0 0 8px;
  transition: background 0.2s, color 0.2s;
}
.tab-item.selected {
  background: #222;
  color: #b6d43a;
  font-weight: bold;
}
.user-center-form-wrap {
  flex: 1;
  padding: 32px 40px 24px 40px;
  background: #fff;
  border-radius: 0 12px 12px 0;
  min-width: 340px;
}
.user-center-form {
  width: 100%;
}
.input-yellow {
  background: #f8f8e6 !important;
  border-radius: 8px;
}
.form-fields {
  max-width: 420px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.user-center-btn {
  background: #b6d43a;
  color: #222;
  border: none;
  font-weight: bold;
  font-size: 18px;
  border-radius: 8px;
  padding: 0 32px;
  height: 38px;
  min-width: 80px;
  width: auto;
  margin: 0;
  display: inline-block;
  text-align: center;
  margin-left: 0;
}
.my-posts-placeholder {
  color: #888;
  font-size: 18px;
  text-align: center;
  margin-top: 80px;
}
</style> 